<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bar</title>
    <script src="../echarts.min.js"></script>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 100%; height: 500px"></div>

    <script>
        // 基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图标的配置项和数据
        option = option = {
            color: ['#5554FF', '#60E960', '#FF9E33', '#FFD82E'],
            textStyle: {
                color: '#fff'
            },
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '0', '5', '10', '15',],
                    ['1#', 41.1, 30.4, 65.1, 53.3],
                    ['2#', 86.5, 92.1, 85.7, 83.1],
                    ['3#', 24.1, 67.2, 79.5, 86.4]
                ]
            },
            xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
            ],
            yAxis: [
                {gridIndex: 0},
                {gridIndex: 1}
            ],
            grid: [
                {bottom: '55%'},
                {top: '55%'}
            ],
            series: [
                // These series are in the first grid.
                // {type: 'line', seriesLayoutBy: 'row'},
                {type: 'line', seriesLayoutBy: 'row'},
                // {type: 'line', seriesLayoutBy: 'row', datasetIndex: 2},
                // These series are in the second grid.
                // {type: 'line', xAxisIndex: 1, yAxisIndex: 1},
                // {type: 'line', xAxisIndex: 1, yAxisIndex: 1},
                // {type: 'line', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'line', xAxisIndex: 1, yAxisIndex: 1, datasetIndex: 2}
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option)
    </script>
</body>
</html>